 <template>
	<v-ace-editor :readOnly='readOnly' :options='editOption' v-model:value='dataEdit' :lang='lang' :theme='theme' :style="{height: height}"/>
	<el-button type="primary" size="small" @click='formatJson' v-if="lang === 'json'">JSON格式化</el-button>
	<el-button type="primary" size="small" @click='expressJson' v-if="lang === 'json'">JSON压缩</el-button>
	<el-button type="primary" size="small" @click='loadBody' v-if="lang === 'json' &&  isShowLoadBtn">从接口加载</el-button>

</template>
 

<script>      
import {VAceEditor} from 'vue3-ace-editor';
import { ElMessage, ElMessageBox } from 'element-plus';
import 'ace-builds/src-noconflict/snippets/json';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/snippets/python';
import 'ace-builds/src-noconflict/mode-python';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/ext-language_tools';
import ace from 'ace-builds';
ace.config.set('basePath', 'https://cdn.jsdelivr.net./npm/ace-builds@' + require('ace-builds').version + '/src-noconflict/');
export default{
	components: {
		VAceEditor
	},  
	methods: {
		expressJson(){
			try{
				const jsobj = JSON.parse(this.dataEdit)
				this.dataEdit = JSON.stringify(jsobj)
			}catch (e){
				ElMessage({type: 'error', message: 'JSON格式错误'})
			}
		},
		formatJson(){
			try{
				const jsobj = JSON.parse(this.dataEdit)
				this.dataEdit = JSON.stringify(jsobj,null,4)
			}catch (e){
				ElMessage({
				  type: 'error',
				  message: 'JSON格式错误',
				})
			}
		}
	},
	emits: ['update:modelValue',],
	props: {
		loadBody:{
			
		},
		apiId:{
			default: -1
		},
		modelValue:{
			type: String
		},
		readOnly: {
			default: false
		},
		isShowLoadBtn: {
			default: false
		},
		theme:{
			default: 'chrome'
		},
		height:{
			default: '400px'
		},
		lang: {
			default: 'json'
		}
	},
	computed:{
		editOption(){
			return {
				enablesBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true,
				tabSize: 4,
				fontSize: 18,
				useworker: true,
				ShowPrintMargin: false,
				enableMultiselect: true,
				showFoldwidgets: true,
				fadeFoldwidgets: true,
				wrap:true,
			}
		},
		dataEdit: {
			get(){
				return this.modelValue
			},
			set(value){
				this.$emit('update:modelValue', value)
			}
		}
	}
}
</script>
